<script>
    $(document).ready(function() {
        idcatglobal = 0;
        /******************************************************************/
        //CATEGORIAS
        /******************************************************************/
        //MOSTRAR TABLA ACTUAL
        mostrarDatos();

        //ocultar barras de progreso
        $("#prog").hide();
        $("#progedit").hide();

        //declarar classes como button
        $(".botones").button();
        $(".subir").button();
        $("#categoriafile").button();
        //OPEN DIV NUEVA CATEGORIA BUTTON
        //-----------------------------------
        $("#adddiv").click(function() {
            $("#formcategoria").trigger("reset");
            $("#categoriafile").val("");
            $("#respuesta").html("");
            $("#divcategoria").dialog("open");

        });
        //OPEN DIV EDIT CATEGORIA 
        //-------------------------------------
        //LLENAR EDITAR CON DATOS EXISTENTES
        $(document).on("click", ".editar", function() {
            idcatglobal = $(this).attr('data-id');
            $("formedit").trigger("reset");
            var nombre = "";
            var filename = "";
            $.ajax({
                url: 'http://localhost:26/ecomerce/Categorias/view/' + idcatglobal,
                dataType: 'json',
                type: "POST",
                success: function(data) {
                    $.each(data, function(item2) {
                        nombre = data[item2].categoria;
                        filename = data[item2].filename;
                    });

                    $("#editcatinput").val(nombre);
                    $("#editfileinput").val(filename);
                    $("#editcategoriafile").val("");
                    $("#editarcategoria").dialog("open");
                },
                error: function() {
                    alert("No Existe esta categoria");
                }
            });

        });

        /****************************************************/
        /****************************************************/
        //DECLARACION DIALOG DIV AGREGAR Y EDITAR CATEGORIAS
        $("#divcategoria").dialog({
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            }
        }).css("font-size", "15px", "width", "auto");
        $('#divcategoria').submit(function(e) {
            e.preventDefault();
        });
        /****************************************************/
        /****************************************************/
        $("#editarcategoria").dialog({
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            }
        }).css("font-size", "15px", "width", "auto");
        $('#editarcategoria').submit(function(e) {
            e.preventDefault();
        });
        /****************************************************/
        /****************************************************/
        //SELECCION DE IMAGENES AGREGAR 
        $('#categoriafile').change(function() {
            var fileName = $('#categoriafile').val();
            var clean = fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
            $("#filenamehidd").val(clean);
          
        });
        //SELECCION DE IMAGENES EDITAR
        /****************************************************/
        $('#editcategoriafile').change(function() {
            var fileName = $('#editcategoriafile').val();
            var clean = fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
            $("#editfileinput").val(clean);
            
        });
        /****************************************************/
        //GUARDAR CATEGORIA BUTTON ADD DIALOG
        $("#subir").click(function(e) {
            e.preventDefault();
            $.ajax({
                url: "http://localhost:26/ecomerce/Categorias",
                type: "POST",
                data: $("#formcategoria").serialize(),
                success: function() {
                    if ($("#categoriafile").val()) {
                        $("#prog").show();
                        //LUEGO DE AGREGAR LA CATEGORIA SE SUBE LA IMAGEN CORRESPONDIENTE
                        $("#categoriafile").upload("http://localhost:26/ecomerce/categorias/subirimagen", function(e) {
                            $("#respuesta").html(e);
                            mostrarDatos();
                            alert("Agregada con exito");
                            $("#divcategoria").dialog("close");
                            $("#prog").hide();
                        }, $("#prog"));

                    }else{
                      mostrarDatos();
                            alert("Agregada con exito");
                            $("#divcategoria").dialog("close");   
                    }
                },
                error: function() {
                    alert("No fue agregado");
                }
            });

        });
        /****************************************************/
      
        /****************************************************/
        //EDITAR CATEGORIA BUTTON DIALOG
        $("#editarbutton").click(function(e) {
        
            e.preventDefault();
            $.ajax({
                url: 'http://localhost:26/ecomerce/Categorias/edit/' + idcatglobal,
                type: "POST",
                data: $("#formedit").serialize(),
                success: function() {
                    if ($("#editcategoriafile").val()) {
                        $("#progedit").show();

                        //LUEGO DE AGREGAR LA CATEGORIA SE SUBE LA IMAGEN CORRESPONDIENTE
                        $("#editcategoriafile").upload("http://localhost:26/ecomerce/categorias/subirimagen", function(e) {
                            $("#respuestaedit").html(e);
                            mostrarDatos();
                            alert("Editado con exito");
                            $("#editarcategoria").dialog("close");
                            $("#progedit").hide();
                            $("#respuestaedit").html("");
                           
                        }, $("#progedit"));

                    } else {
                        alert("Editado con exito");
                    mostrarDatos();
                        $("#editarcategoria").dialog("close");
                    }
                }
            });

        });
        /****************************************************/
        /****************************************************/
        //ELIMINAR CATEGORIA BUTTON 
        $(document).on("click", ".delete", function(e) {
            e.preventDefault();

            var idcat = $(this).attr('data-id');
            $.ajax({
                url: "http://localhost:26/ecomerce/Categorias/delete/" + idcat,
                type: "POST",
                success: function() {
                    alert("Eliminado con exito");
                    mostrarDatos();
                }
            });
        });
    });
    //FUNCION PARA MOSTRAR DATOS DE LA TABLA
    function mostrarDatos() {
        $.ajax({
            url: 'http://localhost:26/ecomerce/Categorias/listacategorias',
            dataType: 'json',
                beforeSend: function() {
                $('#tablaCategorias').html("<center><img src='/ecomerce/css/img/ajax_small.gif'/></center>");
            },
            success: function(data) {
                if(data!=""){
                var tabla = '<table>';
                tabla += '<tr>';
                tabla += '<th>Imagen</th><th>filename</th><th>Categoria</th>';
                tabla += '</tr>';
                $.each(data, function(index, item) {
                    tabla += '<tr>';
                    tabla += '<td><img src="/ecomerce/img/uploads/categoria/filename/' + item.Categoria.filename + '" class="imgtabla" height="100px" width="100px"></td>';
                    tabla += '<td>' + item.Categoria.filename + '</td>';
                    tabla += '<td>' + item.Categoria.categoria + '</td>';

                    tabla += '<td><button type="button" class="editar" data-id="' + item.Categoria.id + '">Editar</button></td>';
                    tabla += '<td><button type="button" class="delete" data-id="' + item.Categoria.id + '">Eliminar</button></td>';
                    tabla += '</tr>';
                });
                tabla += '</table>';
                $('#tablaCategorias').html(tabla);
                }else{
                   tabla = '<center>No hay categorias en la base de datos</center>';
                $('#tablaCategorias').html(tabla);
                }
            }
        });
    }
   


    /********************************************************************/
//CIERRE CATEGORIAS
    /********************************************************************/
</script>
<br><br><hr>
<!-- AGREGAR CATEGORIAS -->
<center><button  id="adddiv" class="botones">Nueva Categoria</button></center>
<div id="divcategoria" title="Nueva Categoria">
    <div id="stylized" class="myform">
    <form id="formcategoria" method="POST">
        <label>Nombre:</label> <input id="nombre" class="fieldform" type="text" name="categoria"><br><br>
        <input id="filenamehidd"  type="hidden" name="filename">
        <input id="dir" type="hidden" name="dir" value="img\uploads\categoria\filename">
    </form></div>
    <input type="file" id="categoriafile" name="categoriafile" />
    <p><progress id="prog" value="0" min="0" max="100"></progress></p>

    <div id="respuesta"></div>
    <br><br><hr>

    <button class="subir"  id="subir">Guardar</button>


</div>
<div id="tablaCategorias"></div>

<!--EDITAR CATEGORIAS -->
<div id="editarcategoria" title="Editar Categoria">
    <div id="stylized" class="myform">
    <form id="formedit" method="POST">
        <label> Nombre: </label><input id="editcatinput" class="fieldform" type="text" name="categoria"><br>
        <input id="editfileinput"  type="hidden" name="filename">
        <input id="editdirinput" type="hidden" name="dir" value="img\uploads\categoria\filename">

    </form></div>
    <input type="file" id="editcategoriafile" name="categoriafile" />
    <p><progress id="progedit" value="0" min="0" max="100"></progress></p>
    <div id="respuestaedit"></div>
    <br><br><hr>
    <button class="subir" type="button"  id="editarbutton">Guardar</button>
  

</div>